```tsx
import * as menu from "@zag-js/menu"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createSignal, createUniqueId, For } from "solid-js"

const data = {
  order: [
    { label: "Ascending", value: "asc" },
    { label: "Descending", value: "desc" },
    { label: "None", value: "none" },
  ],
  type: [
    { label: "Email", value: "email" },
    { label: "Phone", value: "phone" },
    { label: "Address", value: "address" },
  ],
}

export function Menu() {
  const service = useMachine(menu.machine, { id: createUniqueId() })

  const api = createMemo(() => menu.connect(service, normalizeProps))

  const [order, setOrder] = createSignal("")
  const [type, setType] = createSignal([])

  const radios = createMemo(() =>
    data.order.map((item) => ({
      type: "radio",
      value: item.value,
      label: item.label,
      checked: order() === item.value,
      onCheckedChange: (checked: boolean) =>
        setOrder(checked ? item.value : ""),
    })),
  )

  const checkboxes = createMemo(() =>
    data.type.map((item) => ({
      type: "checkbox",
      value: item.value,
      label: item.label,
      checked: type().includes(item.value),
      onCheckedChange: (checked: boolean) =>
        setType((prev) =>
          checked
            ? [...prev, item.value]
            : prev.filter((x) => x !== item.value),
        ),
    })),
  )

  return (
    <>
      <button {...api().getTriggerProps()}>Trigger</button>
      <div {...api().getPositionerProps()}>
        <div {...api().getContentProps()}>
          <For each={radios()}>
            {(item) => (
              <div {...api().getOptionItemProps(item)}>
                <span {...api().getItemIndicatorProps(item)}>✅</span>
                <span {...api().getItemTextProps(item)}>{item.label}</span>
              </div>
            )}
          </For>
          <hr {...api().getSeparatorProps()} />
          <For each={checkboxes()}>
            {(item) => (
              <div {...api().getOptionItemProps(item)}>
                <span {...api().getItemIndicatorProps(item)}>✅</span>
                <span {...api().getItemTextProps(item)}>{item.label}</span>
              </div>
            )}
          </For>
        </div>
      </div>
    </>
  )
}
```
